<template>
    <div class="upload-image">
        <!-- 只展示效果图 -->
        <div class="design-img" v-if="!contrast">
            <div class="title">效果图</div>
            <div span="8" class="left" @mousewheel.prevent="rollImg">
                <div class="image-move-wapper">
                    <div class="image-show-box" ref="imageShowBox">
                        <div class="drag-container" ref="dragContainer" :style="'left:' + dragContainer.newPoint.left+'px; top:' + dragContainer.newPoint.top+'px'" @mousedown="DragContainerMouseDown">
                            <img ref="imgDiv" :src="afterImg" draggable="false" />
                        </div>
                    </div>
                </div>
                <div class="show-big-image" @click="checkBigImg(afterImg)"> <i class="iconfont icon-quanping"></i></div>
            </div> 
        </div>
        <div class="double-img" v-if="contrast">
            <div class="img-item origin-img">
                <div class="title"> 原图 </div>
                <div span="8" class="left " :class="{'contrast' : contrast, 'active': active =='before'}"   @mousewheel.prevent="rollImg1">
                    <div class="image-move-wapper">
                        <div class="image-show-box" :style="{width: contrast ? '100%' :'1000px' ,  height:contrast ? '100%':'100px' }" ref="imageShowBox1">
                            <div class="drag-container" ref="dragContainer1" :style="'left:' + dragContainer1.newPoint.left+'px; top:' + dragContainer1.newPoint.top+'px'" @mousedown="DragContainerMouseDown1">
                                <img ref="imgDiv1" :src="beforeImg" draggable="false" />
                            </div>
                        </div>
                    </div>
                <div class="show-big-image double" @click="checkBigImg(beforeImg)"> <i class="iconfont icon-quanping"></i></div>
                </div> 

            </div>
            <div class="img-item effect-img">
                <div class="title"> 效果图 </div>
                <div span="8" class="left " :class="{'contrast' : contrast, 'active': active =='after'}"   @mousewheel.prevent="rollImg">
                    <div class="image-move-wapper">
                        <div class="image-show-box" :style="{width: contrast ? '100%' :'1000px',height:contrast ? '100%':'100px' }" ref="imageShowBox">
                            <div class="drag-container" ref="dragContainer" :style="'left:' + dragContainer.newPoint.left+'px; top:' + dragContainer.newPoint.top+'px'" @mousedown="DragContainerMouseDown">
                                <img ref="imgDiv" :src="afterImg" draggable="false" />
                            </div>
                        </div>
                    </div>
                <div class="show-big-image double" @click="checkBigImg(afterImg)"> <i class="iconfont icon-quanping"></i></div>

                </div> 
            </div>
        </div>
        <CheckBig @hidden='hidden' :bigImg='bigImg' v-if="showBigimage" ref="showBig" />
    </div>
</template>

<script>
import CheckBig from './checkBigImage'
export default {
    components:{ CheckBig},
    props:['beforeImg' , 'afterImg', 'sliderHeader', 'contrast', 'originImg'],
    data(){
        return{
            bigImg:[],
            showBigimage: false,
            active:'before',
            dragContainer: {
                box: {
                    w: 0,
                    h: 0
                },
                point: {
                    left: 0,
                    top: 0
                },
                newPoint: {
                    left: 0,
                    top: 0
                }
            },
            mousePoint: {
                x: 0,
                y: 0
            },
            imageShowBox: {
                box: {
                    w: 0,
                    h: 0
                },
                dragcheck: {
                    h: true,
                    v: true
                }
            },


            dragContainer1: {
                box: {
                    w: 0,
                    h: 0
                },
                point: {
                    left: 0,
                    top: 0
                },
                newPoint: {
                    left: 0,
                    top: 0
                }
                },
            mousePoint1: {
                x: 0,
                y: 0
            },
            imageShowBox1: {
                box: {
                w: 0,
                h: 0
                },
                dragcheck: {
                h: true,
                v: true
                }
            },
           
        }
    },
    updated() {
        let _this = this;
        // 确保DOM元素已经渲染成功，然后获取拖拽容器和显示区域的大小
        _this.$nextTick(function() {
            _this.dragContainer.box = {
                w: _this.$refs.dragContainer.offsetWidth,
                h: _this.$refs.dragContainer.offsetHeight
            };
        
            _this.imageShowBox.box = {
                w: _this.$refs.imageShowBox.offsetWidth,
                h: _this.$refs.imageShowBox.offsetHeight
            };
        
            // 判断是否允许拖拽
            _this.imageShowBox.dragcheck = {
                h: _this.imageShowBox.box.w > _this.dragContainer.box.w ? false : true,
                v: _this.imageShowBox.box.h > _this.dragContainer.box.h ? false : true
            };

            _this.dragContainer1.box = {
                w: _this.$refs.dragContainer1? _this.$refs.dragContainer1.offsetWidth : 0,
                h: _this.$refs.dragContainer1? _this.$refs.dragContainer1.offsetHeight : 0
            };
            
        
            _this.imageShowBox1.box = {
                w:  _this.$refs.imageShowBox1 ? _this.$refs.imageShowBox1.offsetWidth :0,
                h: _this.$refs.imageShowBox1? _this.$refs.imageShowBox1.offsetHeight : 0
            };
        
            // 判断是否允许拖拽
            _this.imageShowBox1.dragcheck = {
                h: _this.imageShowBox1.box.w > _this.dragContainer1.box.w ? false : true,
                v: _this.imageShowBox1.box.h > _this.dragContainer1.box.h ? false : true
            };
        
        
        });

    },
    methods:{
        hidden(){
            this.showBigimage = false
        },
        // 查看大图
        checkBigImg(url){
            this.bigImg = [url]
            this.showBigimage = true
        },
        // 鼠标在拖拽容器中按下时触发
        DragContainerMouseDown(e) {
            // console.log(this.active)    
            this.$emit('setZoom',parseInt(this.$refs.imgDiv.style.zoom))
            console.log(this.$refs.imgDiv.style.zoom)
            this.active = 'after'
            const _this = this;
            // 记录鼠标点击时的初始坐标
            this.mousePoint = {
                x: e.clientX,
                y: e.clientY
            };
            _this.dragContainer.point = _this.dragContainer.newPoint;
            document.body.onmousemove = _this.DragContainerMouseMove;
            document.onmouseup = _this.DragContainerMouseUp;
            return false;
        },
        // 鼠标在拖拽容器中按下时触发
        DragContainerMouseDown1(e) {
            // console.log(this.active)    
            this.$emit('setZoom',parseInt(this.$refs.imgDiv1.style.zoom))
            console.log(this.$refs.imgDiv1.style.zoom)

            this.active = 'before'
            const _this = this;
            // 记录鼠标点击时的初始坐标
            this.mousePoint1 = {
                x: e.clientX,
                y: e.clientY
            };
            _this.dragContainer1.point = _this.dragContainer1.newPoint;
            document.body.onmousemove = _this.DragContainerMouseMove1;
            document.onmouseup = _this.DragContainerMouseUp;
            return false;
        },
        DragContainerMouseMove1(e){
            const _this = this;
            // 鼠标偏移量 = 初始坐标 - 当前坐标
            let dx = e.clientX - _this.mousePoint1.x;
            let dy = e.clientY - _this.mousePoint1.y;
        
            // 获取拖拽容器移动后的left和top值
            if (_this.imageShowBox1.dragcheck.h)
                var newx = dx > 0 ? Math.min(0, _this.dragContainer1.point.left + dx) : Math.max(- _this.dragContainer1.box.w + _this.imageShowBox1.box.w, _this.dragContainer1.point.left + dx );
            if (_this.imageShowBox1.dragcheck.v)
                var newy = dy > 0 ? Math.min(0, _this.dragContainer1.point.top + dy) : Math.max(- _this.dragContainer1.box.h + _this.imageShowBox1.box.h, _this.dragContainer1.point.top + dy );
        
            _this.dragContainer1.newPoint = {
                left: typeof newx != 'undefined' ? newx : _this.dragContainer1.point.left,
                top: typeof newy != 'undefined' ? newy : _this.dragContainer1.point.top
            };
            return false;
        },
            // 容器拖拽时触发
        DragContainerMouseMove(e) {
            const _this = this;
            // 鼠标偏移量 = 初始坐标 - 当前坐标
            let dx = e.clientX - _this.mousePoint.x;
            let dy = e.clientY - _this.mousePoint.y;
        
            // 获取拖拽容器移动后的left和top值
            if (_this.imageShowBox.dragcheck.h)
                var newx = dx > 0 ? Math.min(0, _this.dragContainer.point.left + dx) : Math.max(- _this.dragContainer.box.w + _this.imageShowBox.box.w, _this.dragContainer.point.left + dx );
            if (_this.imageShowBox.dragcheck.v)
                var newy = dy > 0 ? Math.min(0, _this.dragContainer.point.top + dy) : Math.max(- _this.dragContainer.box.h + _this.imageShowBox.box.h, _this.dragContainer.point.top + dy );
        
            _this.dragContainer.newPoint = {
                left: typeof newx != 'undefined' ? newx : _this.dragContainer.point.left,
                top: typeof newy != 'undefined' ? newy : _this.dragContainer.point.top
            };
            return false;
        },
            // 移动完成  取消onmousemove和onmouseup事件
        DragContainerMouseUp(e) {
                document.body.onmousemove = null;
                document.onmouseup = null;
        },
        PointMouseDown(e) {
            //阻止事件冒泡
            e.stopPropagation();
        },
        rollImg(e) {
            if(this.active != 'after' && this.contrast)return

            console.log(this.$refs.imgDiv.style.transform)
            
            
            // this.dragContainer.newPoint.top =  0
            // console.log(this.dragContainer.newPoint)
            /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
            var zoom = parseInt(this.$refs.imgDiv.style.zoom) || 100;
            /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
            if(event.wheelDelta < 0){
                // this.dragContainer.newPoint.left =  0
                // this.dragContainer.newPoint.top =  0
            }
        
            zoom += event.wheelDelta / 12;
            /* 最小范围 和 最大范围 的图片缩放尺度 */
        
            if (zoom > 0 && zoom < 500) {
                this.$refs.imgDiv.style.zoom = zoom + "%";
                this.$emit('setZoom',zoom)
            }
            return false;
        },
        rollImg1(e) {
            if(this.active != 'before' && this.contrast)return
            // this.dragContainer.newPoint.top =  0
            // console.log(this.dragContainer.newPoint)
            /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
            var zoom = parseInt(this.$refs.imgDiv1.style.zoom)|| 100;
            /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */

            if(event.wheelDelta < 0){
                // this.dragContainer1.newPoint.left =  0
                // this.dragContainer1.newPoint.top =  0
            }
        
            zoom += event.wheelDelta / 12;
            /* 最小范围 和 最大范围 的图片缩放尺度 */
        
            if (zoom > 0 && zoom < 500) {
                this.$refs.imgDiv1.style.zoom = zoom + "%";
                this.$emit('setZoom',zoom)
            }
            return false;
        },
        changeImg(val){
            // console.log(val)
            if(this.contrast){
                if(this.active == 'before'){
                    this.$refs.imgDiv1.style.zoom = val + '%'
                }else{
                    this.$refs.imgDiv.style.zoom = val + "%"
                }
            }else{
                this.$refs.imgDiv.style.zoom = val + "%"
            }
        },
        changeContrast(val){
            console.log(this.contrast,'contrast')
            if(this.contrast){
                if(this.active == 'before'){
                    this.$refs.imgDiv1.style.zoom = val + '%'
                }else{
                    this.$refs.imgDiv.style.zoom = val + "%"
                    this.dragContainer.newPoint.left = 0
                    this.dragContainer.newPoint.top = 0

                }
            }else{
                this.$refs.imgDiv.style.zoom = val + "%"
                    this.dragContainer.newPoint.left = 0
                    this.dragContainer.newPoint.top = 0
            }
        },
    },

}
</script>

<style lang='scss' scoped>
.left {
  position: relative;
  width: 950px;
  height: 650px;
  background-color: #fff;
//   padding: 20px;
  margin: 0 auto;
  margin-top: 30px;
//   overflow: hidden;
}
.show-big-image{
    position: absolute;
    top: 20px;
    right: -20px;
    cursor: pointer;
}
.double{
    right: 3%;
}
.img {
  position: absolute;
  top: 5px;
  left: 7px;
  max-width: 923px;
  max-height: 650px;
  cursor: move;
}
.upload-image{
  display: flex;
  width: 100%;
  background-color: #fff;
  height: 100%;
}
.design-img{
    width: 100%;
    .title{
        height: 50px;
        width: 200px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        cursor: default;
        font-size: 20px;
        border-radius: 0 0 10px 10px;
        background-color: #94d1ca;
        margin: 0 auto;
    }
    .img-content{
        height: 80%;
        margin: 0 auto;
        width: 80%;
        overflow: hidden;
        margin-top: 60px;
        background-color: #ccc;
    }
}
.image-move-wapper{
    height: 100%;
}
.image-show-box {
    margin: 0 auto;
    height: 700px;
    width: 1000px;
    cursor: move;
    overflow: hidden;
    position: relative;
    .drag-container {
      position: absolute;
      left: 0px;
      top: 0;
      /*禁止元素选中*/
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
      .drag-image-box {
    transform-origin: center;
        position: relative;
        
      }
    }
}
.double-img{
    width: 100%;
    display: flex;
    .img-item{
        width: 50%;
        .title{
            width: 200px;
            height: 45px;
            border-radius: 0 0 8px 8px;
            background-color: #94d1ca;
            color: #fff;
            text-align: center;
            margin: 0 auto;
            font-size: 18px;
            line-height: 45px;
        }
    }
    .origin-img{
        position: relative;
    }
    .origin-img::after{
        content: '';
        width: 3px;
        height: 95%;
        background-color: #ccc;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .contrast{
        margin-top: 60px;
        width: 80%;
        height: 70%;
        overflow: hidden;
    }
    .active{
        // border: 5px solid #ffe329;
        outline: solid 5px #ffe329;
    }

}
</style>